<template>
  <div>
    <div class="header">
      <el-input style="width: 200px;margin-right:20px;" v-model="searchName" placeholder="输入公司名进行搜索"></el-input>
      <el-button @click="getCompanyList">搜索</el-button>
    </div>
    <div class="itemContainer">
      <div class="companyItem" v-for="item in companyList" :key="item.id" @click="toDetail(item.id)">
        <img :src="item.avatarUrl" alt="">
        <div>{{item.name}}</div>
        <div>{{item.industry}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.getCompanyList()
  },
  methods: {
    toDetail (id) {
      this.$router.push(`/company/${id}`)
    },
    async getCompanyList () {
      if (this.searchName) {
        const {data: res} = await this.$http.get(`/job/companyList/${this.searchName}`)
        this.companyList = res
        console.log(res, '公司')
      } else {
        const {data: res} = await this.$http.get(`/job/companyList`)
        this.companyList = res
        console.log(res, '公司')
      }
    }
  },
  data () {
    return {
      searchName: '',
      companyList: []
    }
  }
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  margin: 10px 0;
}
.itemContainer {
  display: flex;
  flex-wrap: wrap;
}
.companyItem {
  cursor: pointer;
  margin-right: 15px;
  img {
    border: 1px solid #f0f0f0;
    width: 126px;
    height: 118px;
    border-radius: 4px;
  }
}
</style>

let 不具备声明提前，所以在定义a之前，不会声明a，所以console.log(a)会报错，因为程序还找不过这个变量
console.log(a)
let a = 1
